---
title: テーマとダークモード
---

## 公式テーマの使用

Univer は `@univerjs/themes` パッケージで利用可能な 2 つの公式テーマ、`defaultTheme` と `greenTheme` を提供しています。ニーズに応じて選択できます。

<Callout>
  テーマが指定されていない場合、デフォルトで `defaultTheme` が使用されます。
</Callout>

### テーマプラグインのインストール

#### プリセットモード

プリセットモードでは、テーマを `@univerjs/presets` パッケージからインポートできます：

```typescript
// import { defaultTheme } from "@univerjs/presets";
import { greenTheme } from '@univerjs/presets'

const { univer } = createUniver({
  theme: greenTheme,
  // theme: defaultTheme,
})
```

#### プラグインモード

プラグインモードでは、テーマは `@univerjs/themes` パッケージによって提供されるため、最初にインストールする必要があります。

```package-install
npm install @univerjs/themes
```

```typescript
import { greenTheme } from '@univerjs/themes'
// import { defaultTheme } from "@univerjs/themes";

const univer = new Univer({
  theme: greenTheme,
  // theme: defaultTheme,
})
```

## テーマのカスタマイズ

`Theme` インターフェースに準拠するオブジェクトを作成することで、テーマをカスタマイズできます。デフォルトテーマ変数の定義方法を理解するには、[このドキュメント](/reference/types/theme) を参照してください。

```typescript title="custom-theme.ts"
import type { Theme } from '@univerjs/presets'
// import type { Theme } from "@univerjs/themes";

export const customTheme: Theme = {
  white: '#FEFEFE',
  black: '#1C1C1C',
  primary: {
    50: '#F6F5FF',
    100: '#EDEBFE',
    200: '#DCD7FE',
    300: '#CABFFD',
    400: '#AC94FA',
    500: '#9061F9',
    600: '#7E3AF2',
    700: '#6C2BD9',
    800: '#5521B5',
    900: '#4A1D96',
  },
  // ...
}
```

```typescript
// ここでカスタムテーマをインポートします
import { customTheme } from './custom-theme'

const univer = new Univer({
  theme: customTheme,
})
```

## ダークモード

Univer はダークモードをサポートしており、`darkMode` プロパティを `true` に設定することで有効にできます。

```typescript
new Univer({
  darkMode: true,
})
```

### Facade API

Facade API を使用してダークモードを動的に切り替えることもできます。

```typescript
// ダークモードを有効にする
univerAPI.toggleDarkMode(true)

// ダークモードを無効にする
univerAPI.toggleDarkMode(false)
```
